<!DOCTYPE html>
<html>
  <head>
      <title>New document - Markdownify</title>
      <link href="app/styles/bootstrap.min.css" rel="stylesheet">
      <link href="app/styles/style.css" rel="stylesheet">
      <link rel="stylesheet" href="app/styles/codemirror.css">
      <link rel="stylesheet" href="app/styles/base16-dark.css">
      <link rel="stylesheet" href="app/styles/font-awesome.min.css">
      <link rel="stylesheet" href="app/styles/dialog.css">
      <link rel="stylesheet" href="app/styles/default.css">
      <link rel="stylesheet" href="app/styles/katex.min.css">
  </head>
  <body class="container-fluid">
      <div class="optContainer">
        <div class="mode">
          <span class="toolContainer">
            <a id="angleToolBar" title="Toolbar" class="fa fa-angle-double-right" onclick="showToolBar();" style="cursor: pointer;text-decoration:none;"></a>
          </span>
          <span class="switch-field">
            <input type="radio" name="changeTheme" id="lightThemeRadio" value="light" onclick="changeTheme(this);" title="Light Mode" checked="checked"/>
            <label for="lightThemeRadio">Light</label>
            <input type="radio" name="changeTheme" id="darkThemeRadio" value="dark" onclick="changeTheme(this);" title="Dark Mode" />
            <label for="darkThemeRadio">Dark</label>
          </span>
        </div>
        <div class="pref" id="pref">
          <div class="module">
            <label><input type="checkbox" id="syncScroll"> Sync Scrolling</label>
          </div>
          <div class="switch-field preview-pane">
            <input type="radio" name="showPreference" id="htmlRadio" value="html" onclick="clkPref(this);"/>
            <label for="htmlRadio">HTML</label>
            <input type="radio" name="showPreference" id="previewRadio" value="preview" onclick="clkPref(this);" checked="checked" />
            <label for="previewRadio">Preview</label>
          </div>

        </div>
      </div>
      <div id="toolbarArea">
        <div style="padding-left:10px;">
          <a onclick="toggleFormat('bold');" title="Bold [Ctrl+B]" class="fa fa-bold editor-toolbar"></a>
          <a onclick="toggleFormat('italic');" title="Italic [Ctrl+I]" class="fa fa-italic editor-toolbar"></a>
          <a onclick="toggleHeadingSmaller();" title="Header [Ctrl+H]" class="fa fa-header editor-toolbar"></a>
          <a onclick="toggleFormat('strikethrough');" title="StrikeThrough [Ctrl+/]" class="fa fa-strikethrough editor-toolbar"></a>
          <i class="separator">|</i>
          <a onclick="toggleBlockquote();" title="Quote" class="fa fa-quote-left editor-toolbar"></a>
          <a onclick="toggleUnorderedList();" title="Unordered List" class="fa fa-list-ul editor-toolbar"></a>
          <a onclick="toggleOrderedList();" title="Ordered List" class="fa fa-list-ol editor-toolbar"></a>
          <i class="separator">|</i>
          <a onclick="toggleLatex();" title="Math" class="fa fa-superscript editor-toolbar"></a>
          <i class="separator">|</i>
          <a onclick="drawLink();" title="Create Link [Ctrl+L]" class="fa fa-link editor-toolbar"></a>
          <a onclick="drawImage();" title="Insert Image [Ctrl+Alt+I]" class="fa fa-picture-o editor-toolbar"></a>
          <a onclick="drawTable();" title="Insert Table [Ctrl+Shift+T]" class="fa fa-table editor-toolbar"></a>
          <a onclick="drawHorizontalRule();" title="Insert Horizontal Rule" class="fa fa-minus editor-toolbar"></a>
          <i class="separator">|</i>
          <a onclick="toggleSidePanel();" title="Side-By-Side Panel Toggle" class="fa fa-columns editor-toolbar"></a>
          <a data-toggle="modal" data-target="#myModal" title="Markdown Help" class="fa fa-question-circle editor-toolbar"></a>
        </div>
      </div>
      <section class="row" id="editArea" style="padding-top: 24px;">
          <div class="col-md-6 full-height cmpad" style="box-shadow: -10px 13px 6px 10px rgba(0,0,0,0.4);" id="textPanel">
            <textarea  id="plainText" placeholder="Write your Markdown here.." autofocus></textarea>
          </div>
          <div class="col-md-6 full-height" style="overflow-y: auto;display:block;padding-top: 5px;" id="previewPanel">
            <div id="markdown"></div>
            <textarea id="htmlPreview" class="mdHtml"></textarea>
          </div>
      </section>
      <!-- Markdown Help Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Markdown Help</h4>
            </div>
            <div class="modal-body">
              <section class="modal--default__content" id="modal-body-region">
                <table class="markdown-help-content">
                  <tbody>
                      <tr>
                        <td><strong>Bold</strong></td>
                        <td>**bold**</td>
                      </tr>
                      <tr>
                        <td><i>Italics</i></td>
                        <td>*italics*</td>
                      </tr>
                      <tr>
                        <td><del>Strikethrough</del></td>
                        <td>~~strikethrough~~</td>
                      </tr>
                      <tr>
                        <td>Header</td>
                        <td># H1     ## H2     ### H3</td>
                      </tr>
                      <tr>
                        <td><li>item</li></td>
                        <td>* item</td>
                      </tr>
                      <tr>
                        <td>Blockquote</td>
                        <td>&gt; blockquote</td>
                      </tr>
                      <tr>
                        <td><span class="issue open">#123</span> (issue)</td>
                        <td>#123</td>
                      </tr>
                      <tr>
                        <td><a href="https://github.com/amitmerchant1990/electron-markdownify" target="_rick">Link</a></td>
                        <td>[title](http://)</td>
                      </tr>
                      <tr>
                        <td>Image</td>
                        <td>![alt](http://)</td>
                      </tr>
                      <tr>
                        <td><code>code</code></td>
                        <td>`code`</td>
                      </tr>
                      <tr>
                        <td>L<sup>a</sup>T<sub>e</sub>X</td>
                        <td>$$LaTeX code$$</td>
                      </tr>
                      <tr>
                        <td><pre style="display: inline-block; margin: 4px 0"><code><span class="keyword">var </span>code = <span class="string">"formatted"</span>;</code></pre></td>
                        <td style="line-height: 100%">``` <i style="color: rgba(0,0,0,0.5)">(shift+enter for line break)</i><br>var code = "formatted";<br>```</td>
                      </tr>
                  </tbody>
                </table>
              </section>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>

      <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
      <script src="app/scripts/libs/jquery.min.js"></script>
      <script src="app/scripts/libs/bootstrap.min.js"></script>
      <script>if (window.module) module = window.module;</script>
      <script src="app/scripts/libs/marked.min.js"></script>
      <script src="app/scripts/libs/codemirror.js"></script>
      <script src="app/scripts/libs/search.js"></script>
      <script src="app/scripts/libs/searchcursor.js"></script>
      <script src="app/scripts/libs/dialog.js"></script>
      <script src="app/scripts/libs/closebrackets.js"></script>
      <script src="app/scripts/markdown/markdown.js"></script>
      <script src="app/scripts/app.js"></script>
      <script src="app/scripts/format.js"></script>
      <script src="app/scripts/functions.js"></script>
      <script src="app/scripts/ipc_renderer.js"></script>
      <script src="app/scripts/emoji.js"></script>

      <script>
		  document.addEventListener("keydown", function (e) {
			  if (e.which === 123) {
				  require('remote').getCurrentWindow().toggleDevTools();
			  }
		  });
      </script>
  </body>
</html>
